<template>
  <div class="container ">
    <div class="wrap">
      <TodoHeader :addTodo="addTodo" />
      <TodoList :todos="todos" :delTodo="delTodo" />
      <TodoFooter :todos="todos" :delCompleted="delCompleted" :selectAllToodo="selectAllToodo" />
    </div>
  </div>

</template>

<script>
import TodoHeader from './componets/TodoHeader.vue';
import TodoList from './componets/TodoList.vue';
import TodoFooter from './componets/TodoFooter.vue';
// import func from '../vue-temp/vue-editor-bridge';

export default {
  data() {
    return {
      todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')
    };
  },
  components: {
    TodoHeader,
    TodoList,
    TodoFooter
  },
  methods: {
    //   定义一个从header组件获取的todo将其添加进todos
    addTodo(todo) {
      this.todos.unshift(todo);
    },
    // 删除item的方法 从item项获取该删除的index
    delTodo(index) {
      this.todos.splice(index, 1);
    },
    // 全选/全不选
    selectAllToodo(check) {
      this.todos.forEach(todo => (todo.complete = check));
    },
    // 删除所有complete为true的item
    delCompleted() {
      this.todos = this.todos.filter(todo => !todo.complete);
    }
  },
  watch: {
    //深度监视
    todos: {
      deep: true,
      handler: function(value) {
        window.localStorage.setItem('todos_key', JSON.stringify(value));
      }
    }
  }
};
</script>

<style scoped>
</style>
